<template>
	<view class="store-box bg-white">
		<view class="layout e-p-30 e-m-b-20" v-for="(item, index) in list" :key="index">
			<view class="e-flex e-m-b-30">
				<load-image mode="aspectFill" :size="['76rpx']" radius="10rpx" :src="item.logo">
					<template #error>
						<app-image :size="['76rpx']" src="store_logo.png" />
					</template>
				</load-image>
				<view class="e-flex-1 e-m-l-26">
					<view class="e-flex-1 e-font-26 e-m-b-10">
						{{ item.name }}
					</view>
					<view class="e-font-24">
						{{ item.storeDescription }}
					</view>
				</view>
				<view class="btn e-font-26  c-white bg-primary" @tap="$goTo('/pages/store/index',  { id: item.id })">
					{{ $t('classify.进入店铺') }}
				</view>
			</view>
			<scroll-view class="scroll" scroll-x="true">
				<view class="e-flex  ">
					<view class="e-m-r-12 goods bg-white" v-for="goods in item.products" :key="goods.id"
						@tap="$goTo('/pages/classify/goods/info/index',  { id: goods.id })">
						<load-image mode="aspectFill" :size="['192rpx']" :src="goods.coverImg"></load-image>
						<view class="e-p-10">
							<view class="goods-text e-font-24 e-line-2">
								{{ goods.name }}
							</view>
							<view class="e-font-24  text-left c-red">
								<text class="e-font-24">{{$unitEn}}</text>
								<text class="e-font-32">{{ goods.price }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>

</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
		options: {
			virtualHost: true
		},
		// #endif
	})
</script>
<script setup lang="ts">
	import type { SearchStoreItem } from '@/common/request/api'
	const props = withDefaults(defineProps<{
		list : SearchStoreItem[]
	}>(), {
		list: () => []
	})
</script>
<style lang="scss" scoped>
	.btn {
		padding: 0 16rpx;
		border-radius: 24rpx;
		height: 48rpx;
		line-height: 48rpx;
	}

	.store-box {
		padding: 20rpx;

		scroll-view {

			height: 100%;
		}
	}

	.logo {
		.image {
			width: 148rpx;
			height: 148rpx;
		}
	}

	.layout {
		overflow: hidden;
		background: #F7F7F7;
	}

	.scroll {
		white-space: nowrap;
	}

	.goods {
		width: 192rpx;
		border-radius: 10rpx;

		.goods-text {
			white-space: normal;
			height: 72rpx;
			line-height: 36rpx;
			margin-bottom: 2rpx;
		}
	}
</style>